<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="工具" title="投保人员查询"></crumbs>
        </div>
        <div class="tabcontentbox">
            <div class="innertabbox">
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 0 }" @click="changeinnertab1(0)">长期保
                </div>
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 1 }" @click="changeinnertab1(1)">日日保
                </div>
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 2 }" @click="changeinnertab1(2)">
                    团意日保
                </div>
            </div>
            <div v-if="innertabflag == 0">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="flexcenterbox">
                            <div class="clear" @click="clearlong">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <!--              <div class="clear" @click="longdckfjl">-->
                            <!--                <img src="../../assets/image/Share.png" alt="">-->
                            <!--                <span>导出扣费记录</span>-->
                            <!--              </div>-->
                            <div class="clear" @click="openkhxfjltc">
                                <img src="../../assets/image/Share.png" alt="">
                                <span>导出客户消费记录</span>
                            </div>
                            <div class="clear" @click="openkhfaxfjl">
                                <img src="../../assets/image/Share.png" alt="">
                                <span>导出客户方案消费记录</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="lable">投保人：</div>
                            <el-input @input="changelongtbr" style="margin-right: 30px;width: 300px;" v-model="longtbr"
                                :prefix-icon="Search" placeholder="请输入" />
                            <div class="lable">身份证：</div>
                            <el-input @input="changelongtbr" style="margin-right: 30px;width: 300px;" v-model="longsfz"
                                :prefix-icon="Search" placeholder="请输入" />
                            <div class="lable">客户名称：</div>
                            <el-select clearable style="margin-right: 52px;width:265px" v-model="longkhmc" filterable
                                remote reserve-keyword @change="getstaffrecordlist" placeholder="请输入公司名称"
                                :remote-method="remoteMethod" :loading="loading">
                                <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                    :value="item.id" />
                            </el-select>
                            <div class="lable">保司：</div>
                            <el-select clearable @change="getstaffrecordlist" style="margin-right: 30px;width: 250px;"
                                v-model="longbs" class="m-2" placeholder="请选择保司">
                                <el-option v-for="(ele, index) in longbslist" :key="ele.dictValue"
                                    :label="ele.dictLabel" :value="ele.dictValue" />
                            </el-select>
                        </div>
                        <div class="formitem">
                            <div class="lable">生效日期：</div>
                            <el-date-picker style="margin-right: 53px;width: 277px;" @change="changelongdatearr1"
                                v-model="longdatearr1" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择" :default-time="defaultTime1" />
                            <div class="lable">结束日期：</div>
                            <el-date-picker style="margin-right: 53px;width: 277px;" @change="changelongdatearr2"
                                v-model="longdatearr2" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择" :default-time="defaultTime2" />
                            <div class="lable">在保状态：</div>
                            <el-select clearable @change="getstaffrecordlist" style="margin-right: 30px;width: 250px;"
                                v-model="longpolicyStatus" class="m-2" placeholder="请选择保司">
                                <el-option v-for="(ele, index) in longzbztlist" :key="ele.dictValue"
                                    :label="ele.dictLabel" :value="ele.dictValue" />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="accounttable">
                    <div class="tableborder">
                        <el-table :data="longtabledate" style="width: 100%" :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                            <el-table-column prop="userName" label="投保人" width="70" />
                            <el-table-column prop="idCardNo" label="身份证号" />
                            <el-table-column prop="companyName" label="客户名" />
                            <el-table-column prop="createTime" label="投保日期" width="200" />
                            <el-table-column prop="insurStartTime" label="生效日期" width="200" />
                            <el-table-column prop="insurEndTime" label="结束日期" width="200" />
                            <el-table-column prop="serveCompanyName" label="派遣单位" />
                            <el-table-column prop="companyPlanName" label="方案名称" />
                            <el-table-column prop="occupationName" label="工种" />
                            <el-table-column prop="occupationLevel" label="工种风险等级" width="130" />
                            <el-table-column prop="price" label="单价" width="60" />
                            <el-table-column prop="policyStatus" label="保险状态" width="100">
                                <template #default="scope">
                                    <div v-if="scope.row.policyStatus === 0">待生效</div>
                                    <div v-if="scope.row.policyStatus === 1">保障中</div>
                                    <div v-if="scope.row.policyStatus === 2">不在保</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="" label="操作" width="100" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" v-if="scope.row.policyStatus % 1000 === 0 && scope.row.isMonthMode!==1" link
                                        @click="onCancellationOfLongInsurance(scope.row)">取消投保</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="longtotal" :currentPage="longpagenum" :pageSize="longpagesize"
                            @SizeChange="changelongpagesize" @CurrentChange="changelongpagenum"></pagination>
                    </div>
                </div>
            </div>
            <div v-if="innertabflag == 1">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="flexcenterbox">
                            <div class="clear" @click="clearday">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <div class="clear" @click="daydctbjl">
                                <img src="../../assets/image/Share.png" alt="">
                                <span>导出投保记录</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="lable">投保人：</div>
                            <el-input @input="changedaytbr" style="margin-right: 30px;width: 300px;" v-model="daytbr"
                                :prefix-icon="Search" placeholder="请输入" />
                            <div class="lable">身份证：</div>
                            <el-input @input="changedaytbr" style="margin-right: 30px;width: 300px;" v-model="daysfz"
                                :prefix-icon="Search" placeholder="请输入" />
                            <div class="lable">客户名称：</div>
                            <el-select clearable style="margin-right: 52px;width:265px" v-model="daykhmc" filterable
                                remote reserve-keyword @change="getdaywesureinsurerecordinsurelist"
                                placeholder="请输入公司名称" :remote-method="remoteMethod" :loading="loading">
                                <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                    :value="item.companyName" />
                            </el-select>
                        </div>
                        <div class="formitem">
                            <div class="lable">生效日期：</div>
                            <div style="margin-right: 30px;width: 400px;">
                                <el-date-picker @change="changedaydatearr" v-model="daydatearr" type="daterange"
                                    range-separator="至" value-format="YYYY-MM-DD" start-placeholder="开始日期"
                                    end-placeholder="结束日期" />
                            </div>
                            <div class="lable">保司：</div>
                            <el-select clearable @change="getdaywesureinsurerecordinsurelist"
                                style="margin-right: 30px;width: 250px;" v-model="daybs" class="m-2"
                                placeholder="请选择发票类型">
                                <el-option v-for="(ele, index) in daybslist" :key="ele.dictValue" :label="ele.dictLabel"
                                    :value="ele.dictValue" />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="accounttable">
                    <div class="tableborder">
                        <el-table :data="daytabledate" style="width: 100%" :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                            <el-table-column prop="userName" label="投保人" width="70" />
                            <el-table-column prop="idCardNo" label="身份证号" />
                            <el-table-column prop="companyName" label="客户名" />
                            <el-table-column prop="createTime" label="投保日期" width="200" />
                            <el-table-column prop="projectName" label="项目名称" width="200" />
                            <el-table-column prop="serveCompanyName" label="派遣单位" />
                            <el-table-column prop="comboName" label="方案名称" />
                            <el-table-column prop="insurCompanyName" label="保司" />
                            <el-table-column prop="policyStatus" label="保险状态" width="100">
                                <template #default="scope">
                                    <div v-if="scope.row.policyStatus % 1000 === 0">未投保</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 1">出单中</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 2">待生效</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 3">保障中</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 4">已失效</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 5">投保失败</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 6">取消</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 7">过期</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="daytotal" :currentPage="daypagenum" :pageSize="daypagesize"
                            @SizeChange="changedaypagesize" @CurrentChange="changedaypagenum"></pagination>
                    </div>
                </div>
            </div>
            <div v-if="innertabflag == 2">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="flexcenterbox">
                            <div class="clear" @click="cleartyrb">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <div class="clear" @click="tyrbdctbjl">
                                <img src="../../assets/image/Share.png" alt="">
                                <span>导出投保记录</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="lable">投保人：</div>
                            <el-input @input="changetyrbtbr" style="margin-right: 30px;width: 300px;" v-model="tyrbtbr"
                                :prefix-icon="Search" placeholder="请输入" />
                            <div class="lable">身份证：</div>
                            <el-input @input="changetyrbtbr" style="margin-right: 30px;width: 300px;" v-model="tyrbsfz"
                                :prefix-icon="Search" placeholder="请输入" />
                            <div class="lable">客户名称：</div>
                            <el-select clearable style="margin-right: 52px;width:265px" v-model="tyrbkhmc" filterable
                                remote reserve-keyword @change="gettybwesureinsurerecordinsurelist"
                                placeholder="请输入公司名称" :remote-method="remoteMethod" :loading="loading">
                                <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                    :value="item.companyName" />
                            </el-select>
                        </div>
                        <div class="formitem">
                            <div class="lable">生效日期：</div>
                            <div style="margin-right: 30px;width: 400px;">
                                <el-date-picker @change="changetyrbdatearr" v-model="tyrbdatearr" type="daterange"
                                    range-separator="至" value-format="YYYY-MM-DD" start-placeholder="开始日期"
                                    end-placeholder="结束日期" />
                            </div>
                            <div class="lable">保司：</div>
                            <el-select clearable @change="gettybwesureinsurerecordinsurelist"
                                style="margin-right: 30px;width: 250px;" v-model="tyrbbs" class="m-2"
                                placeholder="请选择发票类型">
                                <el-option v-for="(ele, index) in tyrbbslist" :key="ele.dictValue"
                                    :label="ele.dictLabel" :value="ele.dictValue" />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="accounttable">
                    <div class="tableborder">
                        <el-table :data="tyrbtabledate" style="width: 100%" :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                            <el-table-column prop="userName" label="投保人" width="70" />
                            <el-table-column prop="idCardNo" label="身份证号" />
                            <el-table-column prop="companyName" label="客户名" />
                            <el-table-column prop="createTime" label="投保日期" width="200" />
                            <el-table-column prop="insureDay" label="项目名称" width="200" />
                            <el-table-column prop="serveCompanyName" label="派遣单位" />
                            <el-table-column prop="comboName" label="方案名称" />
                            <el-table-column prop="insurCompanyName" label="保司" width="200" />
                            <el-table-column prop="policyStatus" label="保险状态" width="100">
                                <template #default="scope">
                                    <div v-if="scope.row.policyStatus % 1000 === 0">未投保</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 1">出单中</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 2">待生效</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 3">保障中</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 4">已失效</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 5">投保失败</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 6">取消</div>
                                    <div v-if="scope.row.policyStatus % 1000 === 7">过期</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="tyrbtotal" :currentPage="tyrbpagenum" :pageSize="tyrbpagesize"
                            @SizeChange="changetyrbpagesize" @CurrentChange="changetyrbpagenum"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dcxfjltc" title="导出消费记录" width="500">
            <div class="formtcbox">
                <div class="lable">导出消费记录月份</div>
                <div class="lablecontent">
                    <el-date-picker v-model="longdcm" type="month" value-format="YYYY-MM" placeholder="请选择月份" />
                </div>
            </div>
            <div class="flexcenterbox">
                <el-button class="my_cancelbtn" @click="cancelone">取消</el-button>
                <el-button type="primary" @click="exportRecordsListfn">確定</el-button>
            </div>
        </el-dialog>
        <el-dialog v-model="dcgsfaxfjltc" title="导出公司方案消费记录" width="500">
            <div class="formtcbox">
                <div class="lable">公司名称</div>
                <div class="lablecontent">
                    <el-input style="width: 200px;" v-model="companylong" placeholder="请输入" clearable></el-input>
                </div>
            </div>
            <div class="formtcbox">
                <div class="lable">导出消费记录月份</div>
                <div class="lablecontent">
                    <el-date-picker v-model="longdcmc" type="month" value-format="YYYY-MM" placeholder="请选择月份" />
                </div>
            </div>
            <div class="flexcenterbox">
                <el-button class="my_cancelbtn" @click="canceltwo">取消</el-button>
                <el-button type="primary" @click="exportcostsure">確定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import crumbs from '../../components/crumbs.vue'
import { Search } from '@element-plus/icons-vue'
import { shake } from '../../utils/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    getstaffrecordlistapi,
    getdaywesureinsurerecordinsurelistapi,
    gettybwesureinsurerecordinsurelistapi,
    getcompanyapi,
    getlongtimeinsuranceaudicompanytapi,
    getquerywesureinsurancecompanyapi,
    getquerytyxinsurancecompanyapi,
    exportcostapi,
    exportRecordsListapi,
    wesureinsurerecordexportapi,
    revokeStaffApi
} from '../../api/api'
import baseurl from '../../api/env'


const wesureinsurerecordexport = () => {
    wesureinsurerecordexportapi({
        userName: daytbr.value,
        idCardNo: daysfz.value,
        insureCompanyType: daybs.value === '' || daybs.value === null ? 'insure002_gsc' : daybs.value,
        beginInsureDay: daydatearr.value === null ? '' : daydatearr.value[0],
        endInsureDay: daydatearr.value === null ? '' : daydatearr.value[1],
        companyName: daykhmc.value
    }).then((res: any) => {
        console.log(res)
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}

const wesureinsurerecordexportc = () => {
    wesureinsurerecordexportapi({
        userName: tyrbtbr.value,
        idCardNo: tyrbsfz.value,
        insureCompanyType: tyrbbs.value === '' || tyrbbs.value === null ? 'wesure004_rb' : tyrbbs.value,
        beginInsureDay: tyrbdatearr.value === null ? '' : tyrbdatearr.value[0],
        endInsureDay: tyrbdatearr.value === null ? '' : tyrbdatearr.value[1],
        companyName: tyrbkhmc.value
    }).then((res: any) => {
        console.log(res)
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const longzbztlist = ref<any>([{
    dictLabel: '全部',
    dictValue: '',
},
{
    dictLabel: '待生效',
    dictValue: '0',
},
{
    dictLabel: '在保',
    dictValue: '1',
},
{
    dictLabel: '已过期',
    dictValue: '2',
}
])
const canceltwo = () => {
    longdcmc.value = ''
    companylong.value = ''
    dcgsfaxfjltc.value = false
}
const openkhfaxfjl = () => {
    longdcmc.value = ''
    companylong.value = ''
    dcgsfaxfjltc.value = true
}
const exportcostsure = () => {
    if (longdcmc.value == '') {
        ElMessage({
            type: 'warning',
            message: '请选择月份'
        })
        return
    }
    if (companylong.value == '') {
        ElMessage({
            type: 'warning',
            message: '请输入公司名称'
        })
        return
    }
    exportcostapi({ month: longdcmc.value, companyName: companylong.value }).then((res: any) => {
        console.log(res)
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const cancelone = () => {
    longdcm.value = ''
    dcxfjltc.value = false
}
const openkhxfjltc = () => {
    longdcm.value = ''
    dcxfjltc.value = true
}
const exportRecordsListfn = () => {
    if (longdcm.value === '') {
        ElMessage({
            type: 'warning',
            message: '请选择月份'
        })
        return
    }
    exportRecordsListapi({ yearMonth: longdcm.value }).then((res: any) => {
        console.log(res)
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const defaultTime1 = ref<any>(new Date(2000, 1, 1, 0, 0, 0))
const defaultTime2 = ref<any>(new Date(2000, 1, 1, 23, 59, 59))
const longdcm = ref('')
const longdcmc = ref('')
const companylong = ref('')
const dcxfjltc = ref(false)
const dcgsfaxfjltc = ref(false)
const longdckfjl = () => {
    ElMessageBox.confirm(
        '是否确定导出所有数据项？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '导出成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消导出',
            })
        })
}
const tyrbdctbjl = () => {
    ElMessageBox.confirm('是否确定导出所有投保记录数据项？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        wesureinsurerecordexportc()
        ElMessage({
            type: 'success',
            message: '导出成功',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消导出',
        })
    })
}
const daydctbjl = () => {
    ElMessageBox.confirm(
        '是否确定导出所有投保记录数据项？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            wesureinsurerecordexport()
            ElMessage({
                type: 'success',
                message: '导出成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消导出',
            })
        })
}
const clearlong = () => {
    longtbr.value = ''
    longsfz.value = ''
    longkhmc.value = ''
    longdatearr1.value = null
    longdatearr2.value = null
    longbs.value = ''
    longpolicyStatus.value = ''
    getstaffrecordlist()
}
const clearday = () => {
    daytbr.value = ''
    daysfz.value = ''
    daykhmc.value = ''
    daydatearr.value = null
    daybs.value = ''
    getdaywesureinsurerecordinsurelist()
}
const cleartyrb = () => {
    tyrbtbr.value = ''
    tyrbsfz.value = ''
    tyrbkhmc.value = ''
    tyrbdatearr.value = null
    tyrbbs.value = ''
    gettybwesureinsurerecordinsurelist()
}
const changelongtbr = () => {
    shake(getstaffrecordlist, 400)
}
const changedaytbr = () => {
    shake(getdaywesureinsurerecordinsurelist, 400)
}
const changetyrbtbr = () => {
    shake(gettybwesureinsurerecordinsurelist, 400)
}
const changelongdatearr1 = (val: any) => {
    console.log(val)
    getstaffrecordlist()
}
const changelongdatearr2 = (val: any) => {
    console.log(val)
    getstaffrecordlist()
}
const changedaydatearr = (val: any) => {
    getdaywesureinsurerecordinsurelist()
}
const changetyrbdatearr = (val: any) => {
    gettybwesureinsurerecordinsurelist()
}
const getlongtimeinsuranceaudicompanyt = () => {
    getlongtimeinsuranceaudicompanytapi().then((res: any) => {
        console.log(res, '长期保保司')
        longbslist.value = res
    })
}
const getquerywesureinsurancecompany = () => {
    getquerywesureinsurancecompanyapi().then((res: any) => {
        console.log(res, '日日保保司')
        daybslist.value = res
    })
}

const getquerytyxinsurancecompany = () => {
    getquerytyxinsurancecompanyapi().then((res: any) => {
        console.log(res, '团意日保保司')
        tyrbbslist.value = res
    })
}
const longbslist = ref<any>([])
const daybslist = ref<any>([])
const tyrbbslist = ref<any>([])
const getstaffrecordlist = () => {
    getstaffrecordlistapi({
        pageNum: longpagenum.value,
        pageSize: longpagesize.value,
        companyId: longkhmc.value,
        insurStartTime: longdatearr1.value === null ? '' : longdatearr1.value,
        insurEndTime: longdatearr2.value === null ? '' : longdatearr2.value,
        isDelete: 0,
        userName: longtbr.value,
        idCardNo: longsfz.value,
        insurCompany: longbs.value,
        policyStatus: longpolicyStatus.value,
    }).then((res: any) => {
        console.log(res, '查询长期保险投保人员名单列表')
        longtabledate.value = res.rows
        longtotal.value = res.total
    })
}
const gettybwesureinsurerecordinsurelist = () => {
    gettybwesureinsurerecordinsurelistapi({
        pageNum: tyrbpagenum.value,
        pageSize: tyrbpagesize.value,
        userName: tyrbtbr.value,
        idCardNo: tyrbsfz.value,
        insureCompanyType: tyrbbs.value === '' || tyrbbs.value === null ? 'wesure004_rb' : tyrbbs.value,
        beginInsureDay: tyrbdatearr.value === null ? '' : tyrbdatearr.value[0],
        endInsureDay: tyrbdatearr.value === null ? '' : tyrbdatearr.value[1],
        companyName: tyrbkhmc.value
    }).then((res: any) => {
        console.log(res, '查询团意险投保人员名单列表')
        tyrbtabledate.value = res.list
        tyrbtotal.value = res.totalCount
    })
}
const getdaywesureinsurerecordinsurelist = () => {
    getdaywesureinsurerecordinsurelistapi({
        pageNum: daypagenum.value,
        pageSize: daypagesize.value,
        userName: daytbr.value,
        idCardNo: daysfz.value,
        insureCompanyType: daybs.value === '' || daybs.value === null ? 'insure002_gsc' : daybs.value,
        beginInsureDay: daydatearr.value === null ? '' : daydatearr.value[0],
        endInsureDay: daydatearr.value === null ? '' : daydatearr.value[1],
        companyName: daykhmc.value
    }).then((res: any) => {
        console.log(res, '查询日日保险投保人员名单列表')
        daytabledate.value = res.list
        daytotal.value = res.totalCount
    })
}
const changeinnertab1 = (i: number) => {
    innertabflag.value = i
    if (i === 0) {
        console.log('长期保')
        getstaffrecordlist()
    } else if (i === 1) {
        console.log('日日保')
        getdaywesureinsurerecordinsurelist()
    } else if (i === 2) {
        console.log('团意日保')
        gettybwesureinsurerecordinsurelist()
    }
}
// onMounted(() => {
//   const y = new Date().getFullYear()
//   const m =
//       new Date().getMonth() + 1 >= 10
//           ? new Date().getMonth() + 1
//           : '0' + (new Date().getMonth() + 1)
//   const d = new Date().getDate()
//   console.log(`${y}-${m}-${d}`)
//   daydatearr.value = [`${y}-${m}-${d}`, `${y}-${m}-${d}`]
//   tyrbdatearr.value = [`${y}-${m}-${d}`, `${y}-${m}-${d}`]
//   getquerytyxinsurancecompany()
//   getquerywesureinsurancecompany()
//   getlongtimeinsuranceaudicompanyt()
//   getstaffrecordlist()
// })
onActivated(() => {
    const y = new Date().getFullYear()
    const m =
        new Date().getMonth() + 1 >= 10
            ? new Date().getMonth() + 1
            : '0' + (new Date().getMonth() + 1)
    const d = new Date().getDate() >= 10 ? new Date().getDate() : '0' + (new Date().getDate())
    console.log(`${y}-${m}-${d}`)
    daydatearr.value = [`${y}-${m}-${d}`, `${y}-${m}-${d}`]
    tyrbdatearr.value = [`${y}-${m}-${d}`, `${y}-${m}-${d}`]
    getquerytyxinsurancecompany()
    getquerywesureinsurancecompany()
    getlongtimeinsuranceaudicompanyt()
    getstaffrecordlist()
})
const router = useRouter()
const route = useRoute()
const longbs = ref('')
const longsfz = ref('')
const longdatearr1 = ref<any>(null)
const longdatearr2 = ref<any>(null)
const longkhmc = ref('')
const longpolicyStatus = ref('')
const longtbr = ref('')
const longtotal = ref(0)
const longpagesize = ref(10)
const longpagenum = ref(1)
const longtabledate = ref<any>([])
const changelongpagenum = (val: any) => {
    longpagenum.value = val
    getstaffrecordlist()
}
const changelongpagesize = (val: any) => {
    longpagesize.value = val
    longpagenum.value = 1
    getstaffrecordlist()
}
const daybs = ref('')
const daysfz = ref('')
const daydatearr = ref<any>(null)
const daykhmc = ref('')
const daytbr = ref('')
const daytotal = ref(0)
const daypagesize = ref(10)
const daypagenum = ref(1)
const daytabledate = ref<any>([])
const changedaypagenum = (val: any) => {
    daypagenum.value = val
    getdaywesureinsurerecordinsurelist()
}
const changedaypagesize = (val: any) => {
    daypagesize.value = val
    daypagenum.value = 1
    getdaywesureinsurerecordinsurelist()
}
const tyrbbs = ref('')
const tyrbsfz = ref('')
const tyrbdatearr = ref<any>(null)
const tyrbkhmc = ref('')
const tyrbtbr = ref('')
const tyrbtotal = ref(0)
const tyrbpagesize = ref(10)
const tyrbpagenum = ref(1)
const tyrbtabledate = ref<any>([])
const changetyrbpagenum = (val: any) => {
    tyrbpagenum.value = val
    gettybwesureinsurerecordinsurelist()
}
const changetyrbpagesize = (val: any) => {
    tyrbpagesize.value = val
    tyrbpagenum.value = 1
    gettybwesureinsurerecordinsurelist()
}
const remoteMethod = (query: string) => {
    console.log(query)
    if (query) {
        loading.value = true
        getcompany(query)
    } else {
        companylist.value = []
    }
}
// 获取公司列表
const getcompany = async (val: any) => {
    const res: any = await getcompanyapi(val)
    console.log(res, '获取公司列表')
    companylist.value = res
    loading.value = false
}
const companylist = ref([]) as any
const loading = ref(false)
const innertabflag = ref(0)
const onCancellationOfLongInsurance = async (val: any) => {
    console.log(val, 'rowmsg')
    ElMessageBox.confirm(
        '确定撤销吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await revokeStaffApi({id: val.id})
            await getstaffrecordlist()
            ElMessage({
                type: 'success',
                message: '撤销成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消撤销',
            })
        })
}
const back = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped>
.formtcbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .lable {
        width: 120px;
        text-align: end;
        margin-right: 10px;
    }
}

.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}

.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            display: flex;
            align-items: center;

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #F4F4F7;

        .toptext {
            color: #3D3D3D;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497B1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.innertabactive {
    color: #0256FF !important;
    font-weight: 700;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.tabcontentbox {
    padding: 16px;
}

.innertabbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .innertabitem {
        cursor: pointer;
        min-width: 90px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        color: #A7AAB2;
        font-size: 14px;
        background-color: #EFEEF1;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-top: 1px solid #e3e0e8;
        border-right: 1px solid #e3e0e8;
    }
}

:deep(.el-input__wrapper) {
    width: 277px !important;
}
</style>
